<!-- 巡检 -->
<template>
  <div>
    <van-search v-model="searchVal" placeholder="请输入搜索关键词" />
    <div class="line"></div>
    <van-tabs v-model="active">
      <van-tab title="维修记录">
        <div class="facility">
          <div class="message">
            <div>巡检单</div>
            <div style="font-size:12px;margin-top:10px">
              计划一 &nbsp;&nbsp;&nbsp; 日期 &nbsp;&nbsp;&nbsp;人员
            </div>
          </div>
          <van-button @click="look">
            查看
          </van-button>
        </div>
      </van-tab>
      <van-tab title="维保记录">
        <div class="facility">
          <div class="message">
            <div>巡检单</div>
            <div style="font-size:12px;margin-top:10px">
              计划一 &nbsp;&nbsp;&nbsp; 日期 &nbsp;&nbsp;&nbsp;人员
            </div>
          </div>
          <van-button @click="look">
            查看
          </van-button>
        </div>
      </van-tab>
      <van-tab title="巡检记录">
        <div class="facility">
          <div class="message">
            <div>巡检单</div>
            <div style="font-size:12px;margin-top:10px">
              计划一 &nbsp;&nbsp;&nbsp; 日期 &nbsp;&nbsp;&nbsp;人员
            </div>
          </div>
          <van-button @click="look">
            查看
          </van-button>
        </div>
      </van-tab>
      <van-tab title="巡更记录">
        <div class="facility">
          <div class="message">
            <div>巡检单</div>
            <div style="font-size:12px;margin-top:10px">
              计划一 &nbsp;&nbsp;&nbsp; 日期 &nbsp;&nbsp;&nbsp;人员
            </div>
          </div>
          <van-button @click="look">
            查看
          </van-button>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { Tab, Tabs, Search, Divider, Button, ActionSheet } from 'vant'
export default {
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Search.name]: Search,
    [Divider.name]: Divider,
    [Button.name]: Button,
    [ActionSheet.name]: ActionSheet
  },
  data () {
    return {
      searchVal: '',
      active: 0,
      show: false,
      actions: [
        { name: '保修' }, { name: '设备台账' }
      ],
      isLoading1: false,
      isLoading2: false,
      isLoading3: false
    }
  },

  computed: {},

  methods: {
    onSelect (item) {
      const { name } = item
      switch (name) {
        case '保修':
          this.$router.push('/standingBook-guarantee')
          break
        case '设备台账':
          this.$router.push('/standingBook-detail')
          break
      }
    },
    look () {
      this.$router.push('/polling-detail')
    }
  }
}
</script>
<style lang='less' scoped>
  .line {
    width: 100%;
    height: 1px;
    border: 1px solid rgba(242, 242, 242, 1);
  }
  .facility {
    height: 60px;
    border-bottom: 1px solid rgba(242, 242, 242, 1);
    background: #fff;
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    align-items: center;
    .message {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
    }
  }
</style>
